<template>
	<div class="index rowBC">
		<div class="item rowSC" v-for="(item, index) in list" :key="index"
			:style="{ backgroundImage: `url(${item.icon})` }">
			<a class="name rowBC">
				{{ item.name }}
				<a class="value">{{ item.value }}</a>
			</a>
		</div>
	</div>
</template>

<script lang="ts" setup>
	import {
		computed,
		reactive
	} from "vue";

	const list = reactive < any > ([{
		name: '温度/℃',
		icon: new URL('@/assets/img/index/wd.png',
		    import.meta.url).href,
		value: 23
	}, {
		name: '湿度/%',
		icon: new URL('@/assets/img/index/sd.png',
		    import.meta.url).href,
		value: 30
	}, {
		name: '噪音/dB',
		icon: new URL('@/assets/img/index/zy.png',
		    import.meta.url).href,
		value: 35
	}, {
		name: 'PM2.5',
		icon: new URL('@/assets/img/index/pm.png',
		    import.meta.url).href,
		value: 55
	}, {
		name: '硫化氢/mg/L',
		icon: new URL('@/assets/img/index/lhq.png',
		    import.meta.url).href,
		value: 0
	}, {
		name: '氨气/mg/L',
		icon: new URL('@/assets/img/index/aq.png',
		    import.meta.url).href,
		value: 0
	}, {
		name: '甲醛/mg/L ',
		icon: new URL('@/assets/img/index/jq.png',
		    import.meta.url).href,
		value: 0
	}, {
		name: '污水浊度',
		icon: new URL('@/assets/img/index/ws.png',
		    import.meta.url).href,
		value: +8
	}, {
		name: '污水PH值',
		icon: new URL('@/assets/img/index/ph.png',
		    import.meta.url).href,
		value: 7
	}])
</script>

<style lang="scss" scoped>
	.index {
		flex-flow: row wrap;
		color: #fff;
		// justify-content: space-between;
		height: 100%;
		.item {
			background-size: 100% 100%;
			border-radius: 0.625em;
			width: 8.6em;
			height: 2.9em;
			.name {
				margin-left: 3.7em;
				margin-top: 0.625em;
				font-size: 0.7em;
				width: 100%;
			}
			.value {
				font-size: 1em;
				font-weight: bold;
				margin-right: 0.625em;
				margin-left: 0.3175em;
			}
		}
	}
</style>
